export default {
  name: 'PrivateThoughtViewer',
  props: {
    selectedAgentId: {
      type: String,
      default: null
    }
  },
  emits: ['log-error'],
  setup(props, { emit }) {
    const { ref, watch } = Vue; // Use global Vue

    const agentLogs = ref([]);
    const isLoadingLogs = ref(false);
    const errorLoadingLogs = ref(null);

    watch(() => props.selectedAgentId, async (newAgentId) => {
      console.log(`PrivateThoughtViewer.js: WATCH triggered. New selectedAgentId: ${newAgentId}`); // Added log
      if (newAgentId) {
        isLoadingLogs.value = true;
        errorLoadingLogs.value = null;
        agentLogs.value = []; // Clear previous logs
        try {
          console.log(`PrivateThoughtViewer.js: Fetching logs for agent ID: ${newAgentId}`);
          // Ensure pywebview.api is ready before calling
          if (window.pywebview && window.pywebview.api && typeof window.pywebview.api.get_agent_logs === 'function') {
            const logs = await window.pywebview.api.get_agent_logs(newAgentId, 20);
            if (logs && !logs.error) {
              agentLogs.value = logs;
              console.log(`PrivateThoughtViewer.js: Received ${logs.length} logs.`);
            } else if (logs && logs.error) {
              console.error('Error fetching agent logs from API (PrivateThoughtViewer.js):', logs.error);
              errorLoadingLogs.value = logs.error;
              emit('log-error', `获取Agent日志失败: ${logs.error}`);
            } else {
              console.log('PrivateThoughtViewer.js: No logs returned or unexpected response.');
              agentLogs.value = [];
            }
          } else {
            console.error('PrivateThoughtViewer.js: pywebview.api.get_agent_logs is not available.');
            errorLoadingLogs.value = 'API not available to fetch logs.';
            emit('log-error', '获取Agent日志失败: API不可用');
          }
        } catch (error) {
          console.error('Error calling get_agent_logs (PrivateThoughtViewer.js):', error);
          errorLoadingLogs.value = error.message || '未知错误';
          emit('log-error', `获取Agent日志失败: ${error.message || '未知错误'}`);
        } finally {
          isLoadingLogs.value = false;
        }
      } else {
        agentLogs.value = []; // Clear logs if no agent is selected
        errorLoadingLogs.value = null;
      }
    }, { immediate: true });

    // formatTimestamp 函数现在是全局的 (window.formatDisplayTimestamp)
    // 我们将在返回对象中引用它，以便模板可以像以前一样使用它

    return {
      agentLogs,
      isLoadingLogs,
      errorLoadingLogs,
      formatTimestamp: window.formatDisplayTimestamp // 引用全局函数
      // props are automatically available in the template
    };
  },
  template: `
  <div class="private-thought-viewer">
    <h4>私有思考</h4>
    <div v-if="!selectedAgentId" class="notice">
      请在上方选择一个Agent以查看其思考日志
    </div>
    <div v-else-if="isLoadingLogs" class="loading">
      加载中...
    </div>
    <div v-else-if="agentLogs.length === 0 && selectedAgentId" class="no-logs">
      没有找到该Agent的日志。
    </div>
    <ul v-else class="log-list">
      <li v-for="log in agentLogs" :key="log.log_entry_id" class="log-item">
        <div class="log-timestamp">{{ formatTimestamp(log.timestamp_call_start) }}</div>
        <div class="log-type">类型: {{ log.llm_call_type }}</div>
        <div class="log-summary">摘要: {{ log.summary }}</div>
      </li>
    </ul>
    <div v-if="errorLoadingLogs" class="error-message">
      加载日志时出错: {{ errorLoadingLogs }}
    </div>
  </div>
  `
  // Styles that were in <style scoped> in PrivateThoughtViewer.vue
  // should be moved to a global CSS file (e.g., assets/global.css)
  // or added to index.html, prefixed with .private-thought-viewer to maintain some specificity.
  // For example, in global.css:
  // .private-thought-viewer { padding: 10px; ... }
  // .private-thought-viewer h4 { margin-top: 0; ... }
  // etc.
};